<template>
    <div class="">
        <mt-navbar v-model="selected" style="padding-bottom:0.1rem;">
            <mt-tab-item id="1" style="z-index: 1;" >体温</mt-tab-item>
            <mt-tab-item style="z-index: 1;" id="2">身高体重</mt-tab-item>
            <mt-tab-item style="z-index: 1;" id="3">视力</mt-tab-item>
            <!-- 加z-index防止被canvas遮住 -->
        </mt-navbar>
            
        <!-- tab-container -->
        <mt-tab-container class="absolute_wrap" style="top:2.4rem;" v-model="selected" >
        <mt-tab-container-item id="1" style="overflow-x:hidden;">
            <control healthType=1 :show="this.selected=='1'"></control>
        </mt-tab-container-item>
        <mt-tab-container-item id="2" style="overflow-x:hidden;">
            <heathy healthType=2 :show="this.selected=='2'"></heathy>
        </mt-tab-container-item>
        <mt-tab-container-item id="3" style="overflow-x:hidden;">
            <heathy healthType=3 :show="this.selected=='3'"></heathy>
        </mt-tab-container-item>
        </mt-tab-container>
    </div>   
</template>

<script>
    import control from '../components/control.vue'
    import heathy from '../components/heathy.vue'
    export default {
        created() {
            // this.getList();
        },
        components: {
            control,
            heathy
        },
        data() {
            return {
                selected: '1',
                list: [],
            }
        },
        methods: {},
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>